<template>
  <el-drawer destroy-on-close :close-on-click-modal="false" class="hm-drawer" size="30%" direction="rtl" v-model="show"
    :before-close="handleClose">
    <template #header>
      <div class="hm-box-title">上传合同</div>
    </template>
    <el-tabs v-model="activeTab">
      <el-tab-pane :label="contractFileData.contractType" name="supply">
        <el-form ref="supplyFileFormRef" :model="formSupplyFile" style="width: 100%" label-width="135px"
          :rules="rulesSupplyFile" :inline="true">
          <el-form-item :label="contractFileData.contractType" prop="contractFile">
            <FileUploadDrag v-model="formSupplyFile.contractFile" :limit="1" :fileType="fileType"
              :filename="formSupplyFile.fileName" @modelValueName="modelValueNameSupplyFile"
              @modelValueSize="modelValueSizeSupplyFile" />
          </el-form-item>
          <el-form-item label="保证金金额" prop="marginAmount">
            <el-input-number v-model="formSupplyFile.marginAmount" :min="0" style="width: 300px" />
          </el-form-item>
          <el-form-item label="签订日期" prop="signTime">
            <el-date-picker value-format="YYYY-MM-DD" v-model="formSupplyFile.signTime" type="date"
              placeholder="请选择签订日期" clearable style="width: 300px" />
          </el-form-item>
          <el-form-item label="对接人" prop="dockingBy">
            <el-input v-model="formSupplyFile.dockingBy" placeholder="请输入对接人" style="width: 300px" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <div style="flex: auto">
        <el-button :loading="loading" type="primary" @click="confirmClick">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup name="ContractFile" lang="ts">
import { addHmContract } from '@/api/system/hmContract/index';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const activeTab = ref('supply');
const supplyFileFormRef = ref<ElFormInstance>();
// 合同名称集合
const modelValueNameSupplyFileList = ref<string>();
// 合同大小集合
const modelValueSizeSupplyFileList = ref<string>();
// 限制上传图片为pdf
const fileType = ref(['pdf']);

const loading = ref(false);

const props = defineProps({
  contractFileVisible: {
    type: Boolean,
    default: false
  },
  contractFileData: {
    type: Object,
    default: false
  }
});
const formSupplyFile = ref<{ contractFile?: string | string[]; dockingBy?: string; signTime?: undefined; fileName?: undefined; marginAmount?: number }>({
  contractFile: undefined,
  dockingBy: undefined,
  signTime: undefined,
  marginAmount: 0,
});
/** 回显 */
watch(
  () => props.contractFileData,
  async (val) => {
    if (val.id) {
      formSupplyFile.value = val;
    } else {
      formSupplyFile.value = {};
    }
  }
);
/** 手动清除文件上传的验证 */
watch(
  () => formSupplyFile.value.contractFile,
  async (val) => {
    if (val) {
      supplyFileFormRef.value?.clearValidate(['contractFile']);
    }
  }
);
const rulesSupplyFile = reactive({
  contractFile: [{ required: true, trigger: 'change', message: '请上传合同' }],
  signTime: [{ required: true, trigger: 'change', message: '请选择签订日期' }],
  dockingBy: [{ required: true, trigger: 'change', message: '请输入对接人' }],
  marginAmount: [{ required: true, trigger: 'change', message: '请输入保证金金额' }]
});
const show = computed(() => props.contractFileVisible);
const emits = defineEmits(['doClose']);
const handleClose = () => {
  emits('doClose');
};

const modelValueNameSupplyFile = (data: string) => {
  modelValueNameSupplyFileList.value = data;
};
const modelValueSizeSupplyFile = (data: string) => {
  modelValueSizeSupplyFileList.value = data;
};

/** 确定 */
const confirmClick = () => {
  supplyFileFormRef.value?.validate(async (valid: boolean, fields: any) => {
    if (valid) {
      loading.value = true;
      try {
        await addHmContract({
          ...formSupplyFile.value,
          contractType: props.contractFileData.contractType,
          supplierId: props.contractFileData.supplierId,
          fileName: modelValueNameSupplyFileList.value,
          fileSize: modelValueSizeSupplyFileList.value
        });
        supplyFileFormRef.value?.resetFields();
        loading.value = false;
        proxy?.$modal.msgSuccess('上传成功');
        handleClose();
      } catch (err) {
        loading.value = false;
      }
    }
  });
};
/** 取消 */
const cancel = () => {
  handleClose();
};
</script>

<style scoped lang="scss">
:deep(.el-tabs__nav-wrap::after) {
  height: 0 !important;
}

:deep(.el-input__wrapper) {
  width: 100%;
}
</style>